<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>魏远商城</title>
		<meta name="viewport" content="initial-scale=1, maximum-scale=1">
		<link rel="shortcut icon" href="/favicon.ico">
		<link href="css/mui.min.css" rel="stylesheet" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link href="css/sure.css" rel="stylesheet" />
		<link rel="stylesheet" href="css/my-order.css" />
		<link rel="stylesheet" href="css/style.css" />
		<style type="text/css">
			.mui-toast-container {
				text-align: center;
				position: fixed;
				z-index: 9999;
				bottom: 50px;
				width: 100%;
				-webkit-transition: opacity .8s;
				transition: opacity .8s;
				opacity: 1
			}
			
			.mui-toast-container {
				display: none
			}
		</style>
	</head>

	<body style="background: #eaeef1;">
		<header class="bar bar-nav return-header" style="width: 100%;">
			<span class="mui-action-back order-back"><img src="img/back-le.png" height="50%"/></span>
			<h1 class="title">充值确认</h1>
		</header>

		<div class="my-wallet-recharge-content">
			<p class="my-wallet-recharge-content-monty">
				<span>充值金额</span>
				<span style="color: #e9af29;">¥</span>
				<input id="money1" type="text" placeholder="请输入金额" />
			</p>

			<div class="my-wallet-recharge-content-payway">
				<p>支付方式</p>
				<div class="way">
					<p>支付方式</p>
					<!--<div class="way1">
						<span class="quan"></span>
						<img class="img1" src="img/vip-zhi.png" alt="">
						<span>支付宝</span>
					</div>-->
					<div class="way2 ">
						<span class="quan addred"></span>
						<img class="img2" src="img/vip-wei.png" alt="">
						<span>微信</span>
					</div>
					<!--<div class="way3">
		                <span class="quan"></span>
		                <img class="img3" src="img/yueee.png" alt="">
		                <span>余额支付</span>
		            </div>-->
				</div>
				<!--<div class="my-wallet-recharge-content-payway-choose">
					<div class="my-wallet-recharge-content-payway-choose-radio middle">
						<div></div>
					</div>
					<img src="img/payway1.png" alt="" height="80%" class="middle" style="margin-left: .8rem;"/>
				</div>
				
				<div class="my-wallet-recharge-content-payway-choose">
					<div class="my-wallet-recharge-content-payway-choose-radio middle">
						<div></div>
					</div>
					<img src="img/payway2.png" alt="" height="70%" class="middle" style="margin-left: .8rem;"/>
				</div>
				
				<div class="my-wallet-recharge-content-payway-choose">
					<div class="my-wallet-recharge-content-payway-choose-radio middle">
						<div></div>
					</div>
					<img src="img/payway3.png" alt="" height="70%" class="middle" style="margin-left: .8rem;"/>
				</div>
				
				<div class="my-wallet-recharge-content-payway-choose">
					<div class="my-wallet-recharge-content-payway-choose-radio middle">
						<div></div>
					</div>
					<img src="img/payway4.png" alt="" height="50%" class="middle" style="margin-left: .8rem;"/>
				</div>-->
				<div class="bottom">
					<span>￥</span><span class="money" style="height: 100%;line-height: 48px;">0</span><span class="sure-pay"><img src="img/recharge.png"/></span>
				</div>
				<div style="height: 1px;"></div>
			</div>
		</div>
		<div class="mui-toast-container" id="mui-toast-container">
			<div class="mui-toast-message"></div>
		</div>
		<script src="js/mui.min.js"></script>
		<script src="js/jquery-3.1.1.min.js"></script>
		<script src="js/url.js"></script>
		<script type="text/javascript">
			//			mui.init({
			//	
			//			beforeback: function(){
			//				console.log(JSON.stringify(plus.webview.getWebviewById('my-wallet.html')))
			//				plus.webview.getWebviewById('my-wallet.html').reload();
			//			}
			//		});
			$('.my-wallet-recharge-content-payway-choose>div').click(function() {
				$('.my-wallet-recharge-content-payway-choose>div').removeClass('recharge-a');
				$('.my-wallet-recharge-content-payway-choose>div').children().removeClass('recharge-b');
				$(this).addClass('recharge-a');
				$(this).children().addClass('recharge-b');
			})
			//监听input值变化
			$("#money1").on('input', function(e) {
				$(".money").text($("#money1").val());
				if($("#money1").val() == '') {
					$(".money").text(0.00);
				}
			})
			//			$("#money1").blur(function(){
			//				console.log($('.money').text());
			//				$('.money').text($('#money1').val());
			//				
			//			})
			//			$("#money1").focus(function(){
			//				console.log($('.money').text());
			//				$('.money').text($('#money1').val());
			//				
			//			})

			/*选择微信还是支付宝支付*/
			//			$('.way>div').on('tap', function() {
			//
			//				$(this).find('.quan').addClass('addred');
			//				$(this).siblings().find('.quan').removeClass('addred');
			//			})

			/*点击确认支付判断是微信还是支付宝*/
			$('.sure-pay').on('tap', function() {
				var zhegnshu=/^[0-9]*[1-9][0-9]*$/;
				if($("#money1").val() == '') {
					$('#mui-toast-container').css('display', 'inline-block');
					$('.mui-toast-message').html('请输入充值金额');
					setTimeout(function() {
						$('#mui-toast-container').css('display', 'none')
					}, 1000)
				}else if(!zhegnshu.test($("#money1").val())){
					$('#mui-toast-container').css('display', 'inline-block');
					$('.mui-toast-message').html('充值只能为整数');
					setTimeout(function() {
						$('#mui-toast-container').css('display', 'none')
					}, 1000)
				} else if($("#money1").val() !== '') {
					creatOrder();
				}
			});
			function pd() {
				$('#mui-toast-container').css('display', 'inline-block')
				//				$('.mui-toast-message').html('请检查您输入的手机号码);
				setTimeout(function() {
					$('#mui-toast-container').css('display', 'none')
				}, 1000)
			}
			/*创建订单*/
			function creatOrder() {
				console.log($("#money1").val());
				$.ajax({
						url: ur + '/mobilemember/frontOrder/createOrder',
						type: 'POST',
						headers: {
							"X-Token": localStorage.token
						},
						dataType: 'json',
						data: {
							"orderVO.orderPay": $("#money1").val(),
							"type": 1,
						},
					})
					.done(function(data) {
						
						if(data.result.meta.code == 200) {
//							alert(JSON.stringify(data)+'创建订单成功');
							mui.toast('创建订单成功');
							localStorage.sureorder = data.result.data.orderNum;
							localStorage.sureorderid = data.result.data.orderId;
							pay('weixin');
						}
					})
			}
			//			微信
			function pay(type) {
				console.log(type);
				if(type == "weixin") {
					$.ajax({
						url: ur + '/payment/wxpay/unifiedorder',
						headers: {
							"X-Token": localStorage.token
						},
						type: 'POST',
						dataType: 'json',
						data: {
							'orderVO.id': localStorage.sureorderid,
							'payType': 'jsapi'
						},
						success: function(data) {
//							alert(JSON.stringify(data)+'微信获取信息成功');
							var data = data.data;
							//调起微信支付js
							onBridgeReady(data);
						}

					})

				}
			}

			//微信支付
			function onBridgeReady(obj) {
				WeixinJSBridge.invoke(
					'getBrandWCPayRequest', {
						"appId": obj.appId, //公众号名称，由商户传入
						"timeStamp": obj.timeStamp, //时间戳，自1970年以来的秒数     
						"nonceStr": obj.nonceStr, //随机串     
						"package": obj.package,
						"signType": obj.signType, //微信签名方式：     
						"paySign": obj.paySign //微信签名 
					},
					function(res) {
						if(res.err_msg == "get_brand_wcpay_request:ok") {
							mui.back();
						} else {
							pd();
							$('.mui-toast-message').html('支付失败');
//							mui.toast('支付失败')
//							alert(JSON.stringify(res));
							console.log(res.err_msg);
						}
					});
			}
		</script>
	</body>

</html>